<template>
    <div class="box">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

            <el-form-item style="font-weight:800" label="年级:" prop="grade">
                <el-select v-model="ruleForm.grade" placeholder="年级">
                    <el-option label="一年级" value="一年级"></el-option>
                    <el-option label="二年级" value="二年级"></el-option>
                    <el-option label="三年级" value="三年级"></el-option>
                    <el-option label="四年级" value="四年级"></el-option>
                    <el-option label="五年级" value="五年级"></el-option>
                    <el-option label="六年级" value="六年级"></el-option>
                    <el-option label="初一" value="初一"></el-option>
                    <el-option label="初二" value="初二"></el-option>
                    <el-option label="初三" value="初三"></el-option>
                    <el-option label="高一" value="高一"></el-option>
                    <el-option label="高二" value="高二"></el-option>
                    <el-option label="高三" value="高三"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item style="font-weight:800" label="学科:" prop="discipline">
                <el-select v-model="ruleForm.discipline" placeholder="学科">
                    <el-option v-for="item, index in updata" :label="item.name + item.levelName" :value="index"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item style="font-weight:800" label="试卷类型:" prop="paper">
                <el-select v-model="ruleForm.paper">
                    <el-option label="固定试卷" value="guding"></el-option>
                    <el-option label="时段试卷" value="shiduan"></el-option>
                    <el-option label="任务试卷" value="renwu"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item style="font-weight:800" label="试卷名称:" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>



            <!-- ---------------------输入框部分----------------------------- -->
            <el-form-item v-for="item, index in title" style="font-weight:800" :label="item.label + (index + 1)"
                :prop="item.prop">

                <!-- ------------------------渲染添加输入框-------------------------->
                <el-input style="width:950px;" v-model="ruleForm.title"></el-input>
                <!------------------------------------------------------------------>

                <!------------------------ 点击添加项目时弹出框部分 ----------------------------------->
                <el-button type="text" @click="dialogTableVisible">添加项目</el-button>


                <el-dialog width=70% :visible.sync="dialogTableVisible1">
                    <span>ID:</span>
                    <el-input style="width:300px" v-model="input" placeholder="请输入内容"></el-input>

                    <span style="margin-left:20px">题型:</span>
                    <el-select v-model="value" placeholder="请选择">
                        <el-option v-for="item, Iindex in options" @click.native="aaa(item)" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <el-button type="primary" @click="chazhao" style="margin-left:20px">查询</el-button>
                    <!-- ----------------------------------------------------------------- -->


                    <!---------------------------------- 表格 ---------------------------------->
                    <el-table v-loading="loading" ref="multipleTable" :data="tableData" tooltip-effect="dark"
                        style="width: 100%" @selection-change="handleSelectionChange">

                        <el-table-column @click.native="IIDD" type="selection" width="55">

                        </el-table-column>

                        <el-table-column label="id" width="120">
                            <template slot-scope="scope">{{ scope.row.id }}</template>
                        </el-table-column>
                        <el-table-column prop="questionType" label="题型" width="120">
                        </el-table-column>
                        <el-table-column prop="shortTitle" label="题干" show-overflow-tooltip>
                        </el-table-column>
                    </el-table>
                    <!-- ---------------------------------------------------------------------- -->


                    <!-- ----------------------------------分页器------------------------------ -->
                    <div class="block" style="margin-top:20px;">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="currentPage4" :page-sizes="[5, 10, 20, 30]" :page-size="1"
                            layout="total, sizes, prev, pager, next, jumper" :total="10">
                        </el-pagination>
                    </div>
                    <!-- ------------------------------------------------------------------------ -->

                    <!------------------------ 点击确定取消添加内容-------------------------- -->
                    <div class="btn" style="margin-left:800px">
                        <el-button @click="quxiao">取消</el-button>
                        <el-button type="primary" @click="queding(index, item)">确定</el-button>
                    </div>
                    <!-- ------------------------------------------------------------------ -->


                </el-dialog>
               
                <el-button plain style="border:none;color:#46A6FF" @click="remove(index)">删除</el-button>
                
                <!-- 点击input框获取数据 -->
                <el-card class="box-card" v-if="item.cardS">
                    <div v-for="o, v in item.multipleSelection" :key="v" class="text item">
                        <span>题目:{{v+1}}</span>
                        <!-- <p>{{ o}}</P> -->
                       <p>{{ o.shortTitle}}</P>
                        <span v-for="a, b in o.items" :key="b">{{ a.content }}</span>
                    </div>
                </el-card>
            </el-form-item>
            <!-- ------------------------------------------------------------------------------ -->


            <el-form-item style="font-weight:800" label="建议时长:" prop="clock">
                <el-input v-model="ruleForm.clock"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
                <!-- 点击添加输入框 -->
                <el-button type="success" @click="add">添加标题</el-button>
            </el-form-item>
        </el-form>


    </div>
</template>
<script>
export default {
    data() {
        return {
            list: [],//获取弹出框表格的内容
            tableData: [
                //     date: '2016-05-03',
                //     name: '王小虎',
                //     address: '上海市普陀区金沙江路 1518 弄'
            ],
            multipleSelection: [],
            options: [{//下拉列表框
                value: '1',
                label: '单选题'
            }, {
                value: '2',
                label: '多选题'
            }, {
                value: '3',
                label: '判断题'
            }, {
                value: '4',
                label: '填空题'
            }, {
                value: '5',
                label: '简答题'
            }],
            zhuanhuan: [
                {
                    name: "单选题",
                    value1: 1
                }, {
                    name: "多选题",
                    value1: 2
                }, {
                    name: "判断题",
                    value1: 3
                }, {
                    name: "填空题",
                    value1: 4
                }, {
                    name: "简答题",
                    value1: 5
                }
            ],
            IDD: [],//存放id的数据
            value: '',
            input: '',
            num: 0,
            arr: [],//学科列表添加

            // 文本框加载效果
            loading: false,
            // 分页器
            currentPage4: 1,


            // 写道数据加载未写完

            dialogTableVisible1: false,
            list: [],//添加的数据
            title: [],//添加标题数组
            value: '',
            ruleForm: {
                grade: '',//年级
                discipline: '',//学科
                paper: '',//试卷类型
                naem: '',//试卷名称
                clock: '',//建议时长
                title: ''//标题

            },
            rules: {
                name: [
                    { required: true, message: '请输入试卷名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                clock: [
                    { required: true, message: '请输入建议时长', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                region: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ]
            }
        }
    },
    methods: { // 这是点击确定获取渲染标题中的数据
        //取消事件
        quxiao(){
            this.dialogTableVisible1=false  
        },
        //请求题目查询接口
        queding(Iindex, item) {
            this.dialogTableVisible1=false
            // console.log(Iindex);
            this.IDD.forEach(item2 => {
                this.axios({
                    method: 'post',
                    url: "/api/admin/question/select/" + item2
                }).then(res => {
                    // console.log(res.data.response);
                    this.multipleSelection = res.data.response
                    console.log(this.multipleSelection);
                })
            })


            if (this.multipleSelection.length != 0) {//当添加数据的时候没有值的时候不进行添加
                // console.log('有题目');
                item.cardS = true
                if (item.multipleSelection) {
                    item.cardS = true;//当选中值的时候为显示出 没有的时候为隐藏
                    // console.log('you');
                    item.multipleSelection = item.multipleSelection.concat(this.multipleSelection)//后来添加的内容拼接到新数组上
                } else {
                    // console.log('没有');
                    item.multipleSelection = this.multipleSelection;//每一个标题拥有自己的数组
                }
            } else {
                // console.log('没有题目');
                return;
            }

        },

        //单选事件没有写
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            // console.log(val);
            this.multipleSelection = val;
            this.cardT = true;

            this.IDD = this.multipleSelection.map((item) => {
                // console.log(item);
                return item.id
            })
            // console.log(this.IDD);
        },
        // --------------------------------------输入框部分的点击事件-------------------------------
        // 点击添加项目时弹出框出现加载效果
        dialogTableVisible() {

            this.dialogTableVisible1 = true
            this.loading = true
            //设置延时器，多少时间之后关闭
            setTimeout(() => {
                this.loading = false
            }, 1000);
            // 获取点击添加项目弹出框内容，题目分页数据
            let obj = {
                "id": this.input,
                "questionType": null,
                "level": null,
                "subjectId": null,
                "pageIndex": 1,
                "pageSize": 10
            }
            this.axios({
                method: "post",
                url: "/api/admin/question/page",
                data: obj
            }).then(res => {
                this.tableData = res.data.response.list

                //判断题型
                this.tableData.forEach((item) => {
                    this.zhuanhuan.forEach((item1) => {
                        if (item.questionType == item1.value1) {
                            item.questionType = item1.name
                        }
                    })
                })

            })



        },
        add() {//添加标题
            this.title.push({
                label: '标题:',
                prop: 'title',
                cardS: false,
            })

        },
        chazhao() {
            let obj = {
                "id": this.null,
                "questionType": null,
                "level": null,
                "subjectId": null,
                "pageIndex": 1,
                "pageSize": 10
            }
            this.axios({
                method: "post",
                url: "/api/admin/question/page",
                data: obj
            }).then(res => {
                this.tableData = res.data.response.list
            })
            this.tableData = this.tableData.filter((item) => {
                if (item.id == this.input) {
                    // console.log(item);
                    return item
                }

            })
        },
        aaa(item) {
            this.value = item.label
            // console.log(this.value);
        },

        remove(index) {//点击删除  删除对应的下标
            this.title.splice(index, 1)
        },
        // ----------------------------------------------------------------------------------------






        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
        },
        submitForm() {
            // --------------------------------添加的数据-----------------------------------
            let Formlist = {
                grade: this.ruleForm.grade,
                discipline: this.ruleForm.discipline,
                paper: this.ruleForm.paper,
                naem: this.ruleForm.naem,
                clock: this.ruleForm.clock,
            }
            // console.log(this.ruleForm.grade)
            // console.log(this.updata)
            this.axios({
                method: "post",
                url: "/api/admin/education/subject/list",
                data: Formlist
            }).then(res => {
                // debugger
                console.log(res)
                // this.arr=res.data.response

            })



           let tijiaoshuju =  {
                "id": null,
                "level": 1,
                "subjectId": 1,
                "paperType": 1,
                "limitDateTime": [],
                "name": "456456",
                "suggestTime": "456456",
                "titleItems": [
                    {
                        "name": "456456",
                        "questionItems": [
                            {
                                "id": 9,
                                "questionType": 1,
                                "subjectId": 1,
                                "title": "3",
                                "gradeLevel": 1,
                                "items": [
                                    {
                                        "prefix": "A",
                                        "content": "1",
                                        "score": null,
                                        "itemUuid": null
                                    },
                                    {
                                        "prefix": "B",
                                        "content": "1",
                                        "score": null,
                                        "itemUuid": null
                                    },
                                    {
                                        "prefix": "C",
                                        "content": "1",
                                        "score": null,
                                        "itemUuid": null
                                    },
                                    {
                                        "prefix": "D",
                                        "content": "1",
                                        "score": null,
                                        "itemUuid": null
                                    },
                                    {
                                        "prefix": "E",
                                        "content": "2",
                                        "score": null,
                                        "itemUuid": null
                                    }
                                ],
                                "analyze": "1",
                                "correctArray": null,
                                "correct": "C",
                                "score": "0",
                                "difficult": 5,
                                "itemOrder": null
                            }
                        ]
                    }
                ]
            }
            this.axios({
                url: "/api/admin/exam/paper/edit",
                method:"post",
                data:tijiaoshuju
            }).then(res=>{
                
            })
            this.$router.push("/exam/paper/list")
    } 
    },
    mounted() {

        this.axios({
            method: "post",
            url: "/api/admin/education/subject/list",
        }).then(res => {
            this.tableData = res.data.response
            this.arr =  res.data.response
        })
        


    },
    computed: {
        //选择年级显示对应的学科
        updata() {
            return this.arr.filter(item => item.levelName == this.ruleForm.grade ? item : ""
            )
        }
    }
}
</script>
<style lang="scss" scoped>
.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.box-card {
    width: 480px;
}

.box {
    width: 98.7%;
    margin-left: 7px;
    height: calc(100vh - 105px);
    overflow-y: auto;

    span {
        margin-right: 10px;
    }
}

.el-dialog__wrapper {
    .el-dialog {
        width: 70% !important;
    }

}

body {
    margin: 0;
}
</style>